<!DOCTYPE html><!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>JADE3 study</title>
</head>
<body>
  <p>desc from index</p>
  <h2>文档声明和头尾标签</h2>
  <h3>标签语法</h3>
  <section>
    <div>
      <ul></ul>
      <p></p>
    </div>
  </section>
  <h3>元素属性</h3>
  <div id="id" class="class1 class2"></div>
  <div id="id" class="class1 class2"><a href="http://imooc.com" target="_blank">link</a></div>
  <h3>元素的值，文本</h3>
  <p><a href="http://imooc.com" title="imooc jade study" data-uid="1000">link</a>
    <input name="course" type="text" value="jade">
    <input name="type" type="checkbox" checked>
  </p>
  <h3>混排的大段文本</h3>
  <p>
    1. aa
    2. bb
    <strong>333</strong>
    3. c
    4. dd
  </p>
  <p>1. aa<strong>11</strong>2. bb
    3. c
  </p>
  <h2>注释</h2>
  <h3>单行注释</h3>
  <!-- h3.title(id='title', class='title3') imooc-->
  <h3>非缓冲注释</h3>
  <h3>块注释</h3>
  <h2>声明变量和替换数据</h2>
  <h3>转义</h3>
  <p>text</p>
  <p>&lt;script&gt;alert(1);&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;;</p>
  <p>text</p>
  <p>&lt;script&gt;alert(1);&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;;</p>
  <h3>非转义</h3>
  <p><script>alert(1);</script><span>script</span>;</p>
  <p><script>alert(1);</script><span>script</span>;</p>
  <h3>非解析变量符</h3>
  <p>#{htmlData}</p>
  <p>!{htmlData}</p>
  <h3>不输出 undefined</h3>
  <input value="undefined">
  <input>
  <h3>样式和脚本块语法</h3>
  <style>body {color: #ff6600;}</style>
  <script>
    var imoocCourse = 'jade';
    
  </script>
  <h2>流程逻辑</h2>
  <h3>if else</h3>
  <p>more than 1: jade, node</p>
  <h3>unless</h3>
  <p>2</p>
  <h3>case</h3>
  <p>Hi jade!</p>
  <h3>for</h3>
  <p>jade</p>
  <p>high</p>
  <h3>each</h3>
  <p>course: jade</p>
  <p>level: high</p>
  <p>course: jade</p>
  <p>level: high</p>
  <h3>遍历数组</h3>
  <p>node</p>
  <p>jade</p>
  <p>express</p>
  <h3>嵌套循环</h3>
  <dl>
    <dt>1</dt>
    <dd>a</dd>
    <dd>b</dd>
    <dt>2</dt>
    <dd>c</dd>
    <dd>d</dd>
  </dl>
  <h3>while</h3>
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <h2>神奇的 mixins</h2>
    <p>imooc jade study</p>
  <h3>嵌套的 mixin</h3>
    <p>tom study</p>
    <ul class="courses">
      <li>jade</li>
      <li>node</li>
    </ul>
    <h4>tom</h4>
      <p>tom study</p>
      <ul class="courses">
        <li>jade</li>
        <li>node</li>
      </ul>
  <h3>mixin 的块包含</h3>
    <h4>slogon</h4>
    <p>Good job!</p>
  <h3>mixin 传递属性</h3>
    <p class="magic">attr</p>
    <p id="attrid" class="magic2">attrs</p>
  <h3>mixin 传递位置个数参数</h3>
    <ul class="magic">
      <li>node</li>
      <li>jade</li>
      <li>..</li>
    </ul>
  <h2>模板包含和继承</h2>
  <h3>包含</h3>
  <style>
    body {
      color: #999;
    }
  </style>
  <style>
    h2 {
      color: #000;
    }
  </style><div>
  <h3>content from html</h3>
</div>
  <p>desc from index</p>
  <h2>过滤器 filters</h2>
  <h3>markdown</h3><p>Hi, this is <strong>imooc</strong> <a href="http://imooc.com">link</a></p>
  <h3>less</h3>
  <style>body p {
  color: #ccc;
}

  </style>
  <h3>coffee</h3>
  <script>(function() {
  console.log('This is coffee!');

}).call(this);

  </script>
  <h2>浏览器端使用 jade</h2>
  <div id="runtime"></div>
  <script src="node_modules/jade/runtime.js"></script>
  <script src="runtime.js"></script>
  <script>
    var runtimeNode = document.getElementById('runtime');
    var runtimeHtml = template({isRuntime: true});
    runtimeNode.innerHTML = runtimeHtml;
    
  </script>
</body></html>